<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="gly" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">

</head>
<body>
<!-- 面板 -->
<div class="panel panel-default">
  <!-- 面板头-->
  <div class="panel-heading">
  	<i class="glyphicon glyphicon-th"></i>数据列表
  </div>
    <!-- 面板体-->
  <div class="panel-body">
	   <form class="form-inline" role="form" style="float:left;">
		  <div class="form-group has-feedback">
		    <div class="input-group">
		      <div class="input-group-addon">查询条件</div>
		      <input class="form-control has-success" type="text" placeholder="请输入查询条件">
		    </div>
		  </div>
		  <button type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
	    </form>
	    <form method="post">
		<button type="submit" class="btn btn-danger" style="float:right;margin-left:10px;" formaction="${pageContext.request.contextPath}/users/deleteUsers"><i class=" glyphicon glyphicon-remove" ></i> 删除</button>
		<a class="btn btn-primary" style="float:right;" href="${pageContext.request.contextPath}/users/addUI" ><i class="glyphicon glyphicon-plus" ></i> 新增</a>
		<br>
	 	<hr style="clear:both;">
	 	    <!-- 响应式表格 -->
	  		<div class="table-responsive">
				<table class=".table table-striped table-bordered table-hover" style="margin: 20px auto;width:100%">
	            		<thead>
	            		   <tr >
	            		   		<th>
	            		   			<div class="checkbox">
							<label>
								<input type="checkbox">全选
							</label>
						</div>
	            		   		</th>
	            		   		<th>用户电话</th>
	            		   		<th>真实姓名</th>
	            		   		<th>生日</th>
	            		   		<th>状态</th>
	
	            		   		<th width="120px">操作</th>
	            		  </tr>
	            		</thead>
	            		<tbody>
	            			<gly:forEach items="${list}" var="user">
	            			<tr class="info">
	            				<td style="text-align: center;">
	            					<div class="checkbox">
										<label>
											<input type="checkbox" name="userId" value="${user.id}">
										</label>
								</div>
	            				</td>
	
	            				<td>${user.telephone}</td>
	            				<td>${user.realname}</td>
	            				<td>
	            				<fmt:formatDate value="${user.birthday}" pattern="yyyy-MM-dd"/>
	            				</td>
	            				<td>${user.available==1?'正常':'停用'}</td>
	
	            				<td>
	            					<a href="#" class="btn btn-default btn-xs" ><span class="glyphicon glyphicon-remove"></span>删除</a>
	            					<a href="#"  class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-edit"></span>修改</a>
	            				</td>
	            			</tr>
	            		</gly:forEach>
	            		
	            		</tbody>
	            		  <tfoot>
							     <tr >
								     <td colspan="6" align="center">
										<ul class="pagination">
												<li class="disabled"><a href="#">上一页</a></li>
												<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
												<li><a href="#">2</a></li>
												<li><a href="#">3</a></li>
												<li><a href="#">4</a></li>
												<li><a href="#">5</a></li>
												<li><a href="#">下一页</a></li>
											 </ul>
									 </td>
								 </tr>
	
				  			</tfoot>
	    			</table>
	    	</div>
	    	
	    </form>
  </div>
</div>
<script type="text/javascript"  src="${pageContext.request.contextPath}/js/jquery-1.12.3.min.js"></script>
<script type="text/javascript"  src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
</body>
</html>